<template>
    <div class="wrap">
        <div class="nav">
          <a href="/">
            <img :src="logo" >
            <span v-html="$t('Browse')">Index</span>
          </a>
        </div>
        <div class="content" v-if="callbackMsg" @click="back">
          <div class="icon">
            <img :src="logo" >
          </div>
          <img :src="callbackImg" class="bg">
          <p>{{callbackMsg}}</p>
          <svg v-if="type==='s'" t="1582730463090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" width="64" height="64"><path d="M510.107082 0C228.488568 0 0.191459 228.297109 0.191459 509.913817 0.191459 791.530527 228.488568 1019.827635 510.107082 1019.827635 791.725594 1019.827635 1020.017285 791.530527 1020.017285 509.913817 1020.017285 228.297109 791.725594 0 510.107082 0L510.107082 0ZM410.902284 770.518774 409.764366 769.377244 408.622835 770.518774 168.529307 530.430664 248.958453 449.997904 409.764366 610.798397 771.252096 249.310666 851.681244 329.739812 410.902284 770.518774 410.902284 770.518774Z" fill="#2BDE3F" p-id="3356"></path></svg>
          <svg v-else t="1582730741967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4940" width="64" height="64"><path d="M599.474772 0.692778l0 169.805384c-68.830645 0-496.217549 3.481288-496.217549 418.34497 0 223.336578 160.561859 405.962965 368.19785 435.156868-129.228223-27.421536-226.450499-145.967466-226.450499-288.116977 0-271.375687 254.570953-273.686313 354.470197-273.686313L599.474772 661.659555l330.031599-329.22728L599.474772 0.692778z" p-id="4941" fill="#1afa29"></path></svg>
        </div>
    </div>
</template>
<style lang="less" scoped>
.wrap{
  background-color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
}
.nav{
  height: 80px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eaeaee;
  a{
    display: block;
    width: 200px;
    height: 100%;
    position: relative;
    img{
      display: block;
      height: 100%;
      position: absolute;
      left: 50px;
    }
    span{
      display: block;
      height: 100%;
      margin-left: 130px;
      line-height: 80px;
      font-weight: 600;
      font-size: 18px;
      color: #333;
    }
  }
}
  .content{
    margin: 50px auto;
    padding-top: 100px;
    background-color: #fff;
    cursor: pointer;
    .bg{
      width: 300px;
      display: block;
      margin: 0 auto;
    }
      .icon{
        img{
          width:80px;
          display: block;
          margin: 0 auto;
              background-color: #fff;
        }
      }
    p{
      line-height: 1.8;
      font-size: 22px;
      font-weight: 600;
      text-align: center;
      padding: 30px 0 10px 0;
      letter-spacing: 1px;
    }
    svg{
      width: 50px;
      height: 50px;
      margin: 0 auto;
      display: block;
    }
  }
</style>
<script>
import {cancle, success, logo} from '@/assets/images'
export default {
  data () {
    return {
      callbackMsg: '',
      logo,
      cancle,
      success,
      callbackImg: '',
      type: ''
    }
  },
  mounted () {
    var locale = localStorage.getItem('locale')
    var type = this.$route.query.type
    // eslint-disable-next-line eqeqeq
    if (type == 1) {
      this.type = 's'
      let msg = '会员升级，充值成功！'
      if (locale === 'en-US') {
        msg = 'Member upgrade, recharge successful'
      } else if (locale === 'zh-TW') {
        msg = '會員升級，充值成功'
      } else if (locale === 'ja') {
        msg = 'メンバーのアップグレード、再充電成功'
      }
      this.callbackMsg = msg
      this.callbackImg = this.success
    // eslint-disable-next-line eqeqeq
    } else if (type == 0) {
      this.type = 'e'
      let msg = '会员升级，充值取消!'
      if (locale === 'en-US') {
        msg = 'Member upgrade, recharge canceled'
      } else if (locale === 'zh-TW') {
        msg = '會員升級，充值取消'
      } else if (locale === 'ja') {
        msg = 'メンバーのアップグレード、リチャージのキャンセル'
      }
      this.callbackMsg = msg
      this.callbackImg = this.cancle
    }
  },
  methods: {
    back () {
      this.$router.push('/')
    }
  }
}
</script>
